<template>
  <el-row :gutter="20">
    <el-col :span="18">
      <s2-vue :data='sheetData' />
    </el-col>
    <el-col :span="6">
      <sheet-label-vue @click='onChangeIndex(index)' :isSelected='currentIndex === index' v-for="(item, index) in regionsData" :key="item.id" :data='item' class="mb-20" />
    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from 'vue'
import s2Vue from './components/s2.vue'
import sheetLabelVue from './components/sheet-label.vue'
import { getChartRegions, getChartSheet } from '@/api/chart'
import { watchSwitchLang } from '@/utils/i18n'

/**
 * 获取大区数据
 */
const regionsData = ref([])
const getChartRegionsData = async () => {
  const { regions } = await getChartRegions()
  regionsData.value = regions
}
getChartRegionsData()
watchSwitchLang(getChartRegionsData)

// 选中 大区与表格联动
const currentIndex = ref(0)
const onChangeIndex = (index) => {
  currentIndex.value = index
  // 切换大区时，重新获取表格数据
  getChartSheetData(regionsData.value[currentIndex.value].id)
}

/**
 * 大区对应的表格数据
 */
const sheetData = ref([])
const getChartSheetData = async (id) => {
  const res = await getChartSheet(id)
  sheetData.value = res
}
getChartSheetData()
</script>

<style lang='scss' scoped>
.mb-20 {
  margin-bottom: 20px;
}
</style>
